<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>layer6</title>
  <script type="text/javascript">
    (function () {
      var b = document.createElement("meta");
      b.setAttribute("name", "viewport");
      var c = window.devicePixelRatio,
        a = c ? 1 / c : 1;
      window.screen.availWidth == document.documentElement.offsetWidth && (c = a = 1);
      document.documentElement.setAttribute("data-dpr", c || 1);
      window.navigator.userAgent.match(/android/i) ? b.setAttribute("content", "width=device-width, initial-scale=" +
        a + ", maximum-scale=" + a + ", minimum-scale=" + a + ", user-scalable=no, viewport-fit=cover") : b.setAttribute(
        "content", "initial-scale=" + a + ", maximum-scale=" + a + ", minimum-scale=" + a +
        ", user-scalable=no, viewport-fit=cover");
      document.head.appendChild(b)
    })();
  </script>
  <script type="text/javascript">
    var dpr = document.documentElement.getAttribute("data-dpr") || 1,
      width = document.documentElement.offsetWidth,
      fontSize = 100 / 750 * width;
    document.querySelector("html").style.fontSize = fontSize + "px";
    window.addEventListener("resize", function () {
      var a = 100 / 750 * document.querySelector("html").offsetWidth;
      document.querySelector("html").style.fontSize = a + "px"
    });
  </script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="box">
    <h1>当给了body：position-fixed话，body会切换到最顶部，如果用户已经下滑过页面，那么此时页面的位置会丢失</h1>
    <h1>滚动条的位置同样会丢失。所以如果需要保持滚动条的位置，可以用 js 保存滚动条位置、关闭的时候还原滚动位置。</h1>
    <div class="layer" id="layer">
      <div class="layer-box">
        <div class="close" id="close">X</div>
        <div class="layer-cont">百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。</div>
        <ul class="layer-list">
          <li>第一行</li>
          <li>第二行</li>
          <li>第三行</li>
          <li>第四行</li>
          <li>第五行</li>
          <li>第六行</li>

          <li>66666</li>

          <li>第一行</li>
          <li>第二行</li>
          <li>第三行</li>
          <li>第四行</li>
          <li>第五行</li>
          <li>第六行</li>
        </ul>
        <div class="btns">
          <div class="btn-confirm">确认</div>
          <div class="btn-cancel">取消</div>
        </div>
      </div>
    </div>
    <div class="for-height">
      为了称高度 - 百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。

      <img src="http://pic3.nipic.com/20090527/1242397_102231006_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://pic22.nipic.com/20120714/9622064_105642209176_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      为了称高度 - 百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <button id="btn">点击出弹层</button>
      <img src="http://pic3.nipic.com/20090527/1242397_102231006_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
      <img src="http://pic22.nipic.com/20120714/9622064_105642209176_2.jpg" alt="">
      百度图片使用世界前沿的人工智能技术,为用户甄选海量的高清美图,用更流畅、更快捷、更精准的搜索体验,带你去发现多彩的世界。
    </div>
  </div>
  <script>
    function getScrollOffset() {
      /*
       * @Author: @Guojufeng 
       * @Date: 2019-01-31 10:58:54 
       * 获取页面滚动条的距离-兼容写法封装
       */
      if (window.pageXOffset) {
        return {
          x: window.pageXOffset,
          y: window.pageYOffset
        }
      } else {
        return {
          x: document.body.scrollLeft || document.documentElement.scrollLeft,
          y: document.body.scrollTop || document.documentElement.scrollTop
        }
      }
    };

    var scrollT = null;
    var LastScrollT = 0;
    window.onscroll = function (e) {
      scrollT = getScrollOffset().y;//滚动条距离
      // console.log(scrollT,clientH,scrollT-clientH);
    }

    btn.onclick = function () {
      layer.style.display = 'block';
      // 在这里获取滚动的距离，赋值给body，好让他不要跳上去。
      document.body.style.overflow = 'hidden';
      document.body.style.position = 'fixed';
      document.body.style.top = -scrollT + 'px';//改变css中top的值，配合fixed使用
      // 然后找个变量存一下刚才的scrolltop，要不然一会重新赋值，真正的scrollT会变0
      LastScrollT = scrollT;
    }
    var closeBtn = document.getElementById('close');
    closeBtn.onclick = function () {
      console.log(LastScrollT)
      layer.style.display = 'none';
      document.body.style.overflow = 'auto';
      document.body.style.position = 'static';

      // 关闭close弹层的时候，改变js中的scrollTop值为上次保存的LastScrollT的值。并根据兼容性赋给对应的值。
      if (window.pageXOffset) {
        window.pageYOffset = LastScrollT;
      }else{
        document.body.scrollTop = LastScrollT;
        document.documentElement.scrollTop = LastScrollT;
      }
    }
    console.log(`
      这种原理简单，理解方便。并且各方面都能实现，比如说body可以继续滚动，弹层出来后他的scrollTop不会跳到顶部。

      弹层中不管短还是长，需不需要滚动，都不care，自由活动。

      然后关闭弹层后，body还可以继续滚动，丝毫不受影响。

      兼容性虽然都写了，但是我也没测试~
    `)
  </script>
</body>

</html>